<template>
	<view>
		<image src="../../static/img/jfmx.png" class="jf_bg w100"></image>
		<view class="relative" style="margin-top: -480rpx;">
			<view class="flex align-center justify-between padding-x-30">
				<image @click="goBack()" src="../../static/img/back_f.png" style="width: 32rpx;height: 32rpx;"></image>
				<view @click="showMutibleDate = true" style="background: rgba(255,255,255,0.2);" class="padding-x-24 flex1 flex align-center justify-between margin-left-30 radius60">
					<input v-model="date" disabled type="text" class="fs-24 color-fff flex1" style="height: 60rpx;" placeholder="可进行天/月/季度/年度查询">
					<image src="../../static/img/date.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view class="margin-top-80 flex align-center justify-between">
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.all_cash}}</view>
					<view class="fs-28 margin-top-16">累计收益提现</view>
				</view>
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.once_cash}}</view>
					<view class="fs-28 margin-top-16">本次提现</view>
				</view>
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.retail}}</view>
					<view class="fs-28 margin-top-16">余额</view>
				</view>
			</view>
			<view style="margin-top: 140rpx;" class="padding-x-24" >
				<view class="fw-600 flex align-center padding-y-30"><view class="bg-zhuse" style="width: 6rpx;height: 30rpx;"></view><text class="fs-30 color-333 margin-left-16">收益统计</text></view>
				<view class="flex align-center justify-between margin-bottom-24">
					<text class="fs-28  flex1 text-center" @click="changeType('zhi')"  :class="type == 'zhi'?'color-zhuse':'color-333'">直推({{first.rate}}%)</text>
					<text class="fs-28  flex1 text-center" @click="changeType('jian')"  :class="type == 'jian'?'color-zhuse':'color-333'">间推({{second.rate}}%)</text>
				</view>
				
				<!-- 直推表格 -->
				<view class="solid" v-if="type == 'zhi'">
					<view class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 fs-24 color-333 solid-right"></view>
						<view class="w20 text-center padding-y-24 fs-24 color-333 solid-right">会员消费额</view>
						<view class="w20 text-center padding-y-24 fs-24 color-333 solid-right">提成额</view>
					</view>
					<view v-for="(item,index) in firstList" :key='index' class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 fs-24 color-999 solid-right">{{item.create_time}}</view>
						<view class="w20 text-center padding-y-24 fs-30 color-666 solid-right">{{item.pay_amount}}</view>
						<view class="w20 text-center padding-y-24 fs-32 color-333 solid-right">{{item.num}}</view>
					</view>
					<view class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 fs-28 color-333 solid-right">小计</view>
						<view class="w20 text-center padding-y-24 fs-30 color-zhuse fw-600 solid-right">{{first.all_pay_amount}}</view>
						<view class="w20 text-center padding-y-24 fs-32 color-zhuse fw-600 solid-right">{{first.all_num}}</view>
					</view>
				</view>
				<!-- 直推表格end -->
				
				<!-- 间推表格 -->
				<view class="solid" v-if="type == 'jian'">
					<view class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 fs-24 color-333 solid-right"></view>
						<view class="w20 text-center padding-y-24 fs-24 color-333 solid-right">会员消费额</view>
						<view class="w20 text-center padding-y-24 fs-24 color-333 solid-right">提成额</view>
					</view>
					<view v-for="(item,index) in secondList" :key='index' class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 fs-24 color-999 solid-right">{{item.create_time}}</view>
						<view class="w20 text-center padding-y-24 fs-30 color-666 solid-right">{{item.pay_amount}}</view>
						<view class="w20 text-center padding-y-24 fs-32 color-333 solid-right">{{item.num}}</view>
					</view>
					<view class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 fs-28 color-333 solid-right">小计</view>
						<view class="w20 text-center padding-y-24 fs-30 color-zhuse fw-600 solid-right">{{second.all_pay_amount}}</view>
						<view class="w20 text-center padding-y-24 fs-32 color-zhuse fw-600 solid-right">{{second.all_num}}</view>
					</view>
				</view>
				<!-- 间推表格end -->
				
			</view>
		</view>
		
		<view class="padding-x-60  padding-y-30 fixed w100" style="bottom: 0;">
			<view @click="jump('/pages/my/tixian?type=retail')" class="callBtn color-fff radius60 h40 fs-28 text-center">提现</view>
		</view>
		
		<date-range mode="date" :showMutibleDate="showMutibleDate" :startDate="startDate" :endDate="endDate"
			 @onSelected="dateSelected"></date-range>
		
		
	</view>
</template>

<script>
	import dateRange from 'components/zxp-datepickerRange/zxp-datepickerRange.vue'
	export default {
		components: {
			dateRange
		},
		data() {
			return {
				startDate: '2021-12-01',
				endDate: '2022-12-30',
				q: {
					start_time: "",
					end_time: "",
					page: 1
				},
				info:{},
				hasMore: true,
				loadStatus: '',
				list: [],
				date:'',
				first:{},
				second:{},
				type:"zhi",
				firstList:[],
				secondList:[],
				showMutibleDate: false,
			}
		},
		onShow() {
			this.q.page = 1;
			this.firstList = [];
			this.secondList = [];
			this.getList();
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				this.getList();
			}
		},
		methods: {
			getList() {
				this.$api.retail_info(this.q).then(res => {
					if (res.code == 1) {
						this.info = res.data;
						this.isLoading = false;
						this.first = res.data.first;
						this.second = res.data.second;
						this.firstList = [...this.firstList, ...res.data.first.list.data];
						this.secondList =  [...this.secondList, ...res.data.second.list.data];
						// if (res.data.list.data.length != 0) {
						// 	this.hasMore = true;
						// 	this.loadStatus = '';
						// } else {
						// 	this.hasMore = false;
						// 	this.loadStatus = 'over';
						// }
					}
				})
			},
			
			dateSelected: function(e) {
				console.log(e)
				if (e) {
					this.q.start_time = e.start
					this.q.end_time = e.end
					this.date = e.start +'至' + e.end
				}
				/*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
				this.showMutibleDate = false;
				this.q.page = 1;
				this.firstList = [];
				this.secondList = [];
				this.getList();
			},
			
			changeType(type){
				this.type = type;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jf_bg{height: 560rpx;}
	.uni-input-placeholder{color: #fff;}
	.color1FC830{color: #1FC830;}
	.color239AFF{color: #239AFF;}
	.w40{width: 40%;}
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 60rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
</style>
